import React, { Component } from 'react';
import {get, post, deletes} from '@api/index.js';
import './index.less'
import '../../../asset/less/part.less'
// import a fron '@'
export default class About extends Component {
  constructor(props){
    super(props);
    this.articleList = [];
    this.curArticle = {};
  }
  componentDidMount(){
    this.getArticle();
  }
  addArticle(){
    post('/api/saveArticle',{
      'title': 'front-test',
      'author': '橘子大大',
      'authorId': 12312,
      'content': '阿斯顿发类似的减肥啦三大纪律发绝世独立飞机阿里斯顿放假啦是江东父老啊是老地方见哦我 i 阿胶风俗礼节阿斯顿发类似的减肥啦三大纪律发绝世独立飞机阿里斯顿放假啦是江东父老啊是老地方见哦我 i 阿胶风俗礼节阿斯顿发类似的减肥啦三大纪律发绝世独立飞机阿里斯顿放假啦是江东父老啊是老地方见哦我 i 阿胶风俗礼节',
      'description':'前端发送'
    }).then(res => {
      this.getArticle();
    })
  }
  getArticle(){
    get('/api/getArticle',{data:'ddd'}).then(res => {
      this.articleList = res && res.data.data;
      this.setState({
        articleList: this.articleList
      })
    })
  }
  deleteArticle(e,artId){
    e.stopPropagation();
    deletes('/api/deleteArticle', artId).then( res => {
      console.log(res,'delete')
      if(res){
        this.getArticle();
      }
    })
  }
  selectArticle(idx){
    if( !this.articleList[idx]) return;
    this.curArticle = this.articleList[idx];
    this.setState({
      curArticle: this.curArticle
    })
  }
  render() {
    return <div className="home-page page-component">
      <div className="article-content">
        <nav className="nav article-content-nav"><div className="bt-primary pointer" onClick={ () => this.addArticle()}>添加文章</div></nav>
        <article>
          <aside>
            {
              this.articleList.map( (v ,k ) => {
                return <div className="article-content-card pos-re" key={k} onClick={ () => this.selectArticle(k) }>
                  <div className="bt-delete pos-ab article-content-card__delete" onClick={ (e) => this.deleteArticle(e,v.authorId)}>删除</div>
                  <header>
                    <div className="article-content-card-title">{v.title}</div>
                    <div className="article-content-card-author">{v.author}</div>
                    <div className="article-content-card-desc">{v.description}</div>
                  </header>
                </div>
              })
            }
          </aside>
          <section>
            <h3>{this.curArticle.title}</h3>
            <h6>{this.curArticle.author}</h6>
            <div>{this.curArticle.description}</div>
            <div>{this.curArticle.content}</div>
          </section>   
        </article>
      </div>
    </div>
  }
}
